import React from 'react';
import {View, StyleSheet, ScrollView} from 'react-native';
import {StackNavigationProp} from '@react-navigation/stack';
import {stackPageData} from './routes';
import {Grid} from '@uiw/react-native';

const styles = StyleSheet.create({
  block: {
    flex: 1,
  },
});

type ModalStackNavigation = StackNavigationProp<{}>;

export default ({navigation}: {navigation: ModalStackNavigation}) => {
  const uri =
    '';

  const data = Array.from(
    stackPageData.map((_val, i) => {
      return {icon: uri, text: _val.name};
    }),
  );
  return (
    <ScrollView>
      <View style={styles.block}>
        <Grid
          data={data}
          columns={3}
          itemStyle={{height: 100}}
          onPress={(data1: any, index: number) => {
            navigation.push(
              data1.text as never,
              {...stackPageData[index].params} as never,
            );
          }}
        />
      </View>
    </ScrollView>
  );
};
